<template>
  <view class="surnameOrigin allColumnCenter">
    <!--  标题  -->
    <header-title ref="headerTitle" isDisplayBack title="中华姓氏" is-fixed background="#f5f5f5"
                  @getPageHeight="getPageHeight"></header-title>
    <view :style="{height:`${headerHeight}px`}"></view>
    <!--  顶部栏  -->
    <scroll-view class="surnameOrigin_scroll" :scroll-x="true">
      <view class="surname-list row">
        <view class="surname-item allRowCenter" v-for="(item, index) in titleList" :key="index"
              @click="goPath(item.name)">
          <view class="surname-item-name">{{ item.name }}</view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import HeaderTitle from "../../components/shiqinComponents/pageComponents/headerTitle.vue";

export default {
  components: {HeaderTitle},
  data() {
    return {
      headerHeight: 0,
      titleList: [
        {name: '张姓始祖'},
        {name: '起源'},
        {name: '张姓始祖'},
        {name: '张姓始祖'},
        {name: '张姓始祖'},
        {name: '张姓始祖'},
        {name: '张姓始祖'},
      ]
    };
  },
  onReady() {
    this.$nextTick(() => {
      this.$refs.headerTitle.getPageHeight()
    })
  },
  methods: {
    // 获取头部高度
    getPageHeight(number) {
      this.headerHeight = number
    },
  },
}
</script>

<style lang="scss">
.surnameOrigin {
  width: 750rpx;
  min-height: 100vh;
  background: $secondaryPages;
  overflow: hidden;

  .surnameOrigin_scroll {
    width: 702rpx;
    //overflow: hidden;
    padding: 25rpx 0;

    .surname-list {

      .surname-item {
        margin: 0 10rpx;
        width: 168rpx;
        height: 52rpx;
        background: #FAE6BC;
        border-radius: 40rpx 40rpx 40rpx 40rpx;

        .surname-item-name {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 22rpx;
          color: #4B4B4B;
        }
      }
    }
  }


}
</style>
